// import echarts from "echarts";
import * as echarts from "echarts/core";
// 按需引入方式
// import echarts from '@/views/package/echarts/components/BaseEcharts/utils/echarts'
export function getOptions(params) {
  const { stMin, stMax, ygMin, ygMax, stSplit, ygSplit, scatterData } =
    getParamsData(params);

  const xData = [];
  const yData = [];
  for (let y = stMin; y < stMax + stSplit; y += stSplit) {
    yData.push(y);
  }

  for (let x = ygMin; x < ygMax; x += ygSplit) {
    xData.push(x);
  }

  const pointObj = {
    禁止左侧坐标: [
      [0, 163.05],
      [0, 171.31],
      [0, 180.91],
      [0, 185.6],
      [0, 192.75],
      [0, 195.69],
      [0, 203.24],
      [0, 214.45],
      [0, 219.59],
      [0, 220.93],
    ],
    禁止右侧坐标: [
      [320, 220.93],
      [320, 219.59],
      [310, 214.45],
      [280, 203.24],
      [270, 195.69],
      [260, 192.75],
      [240, 185.6],
      [220, 180.91],
      [210, 171.31],
      [200, 163.05],
    ],
    稳定一区左侧坐标: [
      [200, 163.05],
      [210, 171.31],
      [220, 180.91],
      [240, 185.6],
      [260, 192.75],
      [270, 195.69],
      [280, 203.24],
      [310, 214.45],
      [320, 219.59],
      [320, 220.93],
    ],
    稳定一区右侧坐标: [
      [340, 220.93],
      [340, 219.59],
      [330, 214.45],
      [320, 203.24],
      [310, 195.69],
      [300, 192.75],
      [270, 185.6],
      [260, 180.91],
      [250, 171.31],
      [240, 163.05],
    ],
    限制运行区域左侧坐标: [
      [240, 163.05],
      [250, 171.31],
      [260, 180.91],
      [270, 185.6],
      [300, 192.75],
      [310, 195.69],
      [320, 203.24],
      [330, 214.45],
      [340, 219.59],
      [340, 220.93],
    ],
    限制运行区域右侧坐标: [
      [510, 220.93],
      [510, 219.59],
      [490, 214.45],
      [470, 203.24],
      [450, 195.69],
      [440, 192.75],
      [410, 185.6],
      [410, 180.91],
      [370, 171.31],
      [352, 163.05],
    ],
    稳定二区左侧坐标: [
      [352, 163.05],
      [370, 171.31],
      [410, 180.91],
      [410, 185.6],
      [440, 192.75],
      [450, 195.69],
      [470, 203.24],
      [490, 214.45],
      [510, 219.59],
      [510, 220.93],
    ],
    稳定二区右侧坐标: [
      [700, 220.93],
      [700, 219.59],
      [700, 214.45],
      [700, 203.24],
      [700, 195.69],
      [700, 192.75],
      [700, 185.6],
      [700, 180.91],
      [642, 171.31],
      [591, 163.05],
    ],
  };
  const scatterMock = {
    稳定二区: [
      ...pointObj["稳定二区左侧坐标"],
      ...pointObj["稳定二区右侧坐标"],
    ],
    稳定一区: [
      ...pointObj["稳定一区左侧坐标"],
      ...pointObj["稳定一区右侧坐标"],
    ],
    限制区: [
      ...pointObj["限制运行区域左侧坐标"],
      ...pointObj["限制运行区域右侧坐标"],
    ],
    禁止区: [...pointObj["禁止左侧坐标"], ...pointObj["禁止右侧坐标"]],
  };

  const areaSeries = [
    // 文字标注
    {
      name: "标注",
      type: "line",
      data: [],
      yAxisIndex: 1,
      xAxisIndex: 1,
      markLine: {
        data: [
          {
            name: "稳定运行区",
            xAxis: "230",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "稳\n定\n运\n行\n区",
              // position: "middle",
              distance: [0, -620],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "禁止运行区",
            xAxis: "120",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "禁\n止\n运\n行\n区",
              // position: "middle",
              distance: [0, -370],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "限制运行区",
            xAxis: "360",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "限\n制\n运\n行\n区",
              // position: "middle",
              distance: [0, -370],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "稳定运行区",
            xAxis: "600",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "稳\n定\n运\n行\n区\n2",
              // position: "middle",
              distance: [0, -370],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "最大水头",
            xAxis: "20",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "最大水头",
              // position: "middle",
              distance: [0, -30],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "额定水头",
            xAxis: "20",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "额定水头",
              // position: "middle",
              distance: [0, -415],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "最小水头",
            xAxis: "20",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "最小水头",
              // position: "middle",
              distance: [0, -720],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "国标要求稳定运行范围界限（55%）",
            xAxis: "640",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "国标要求稳定运行范围界限（55%）",
              // position: "middle",
              distance: [0, -80],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "出力限制线",
            xAxis: "665",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "出力限制线",
              // position: "middle",
              distance: [0, -600],
              fontSize: 16,
              fontWeight: 600,
            },
          },
        ],
      },
    },
    //  自定义禁止区域
    {
      type: "custom",
      yAxisIndex: 1,
      xAxisIndex: 1,
      tooltip: {
        show: false,
      },
      renderItem: function (params, api) {
        if (params.context.rendered) {
          return;
        }
        params.context.rendered = true;
        let points = [];
        for (let i = 0; i < scatterMock["禁止区"].length; i++) {
          points.push(api.coord(scatterMock["禁止区"][i]));
        }
        let color = "rgba(255,0,0,0.5)";
        return {
          type: "polygon",
          transition: ["shape"],
          shape: {
            points: points,
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color, 0.1),
          }),
        };
      },
      clip: true,
      silent: true,
      data: scatterMock["禁止区"],
    },
    // 自定义稳定一区
    {
      type: "custom",
      yAxisIndex: 1,
      xAxisIndex: 1,
      tooltip: {
        show: false,
      },
      renderItem: function (params, api) {
        if (params.context.rendered) {
          return;
        }
        params.context.rendered = true;
        let points = [];
        for (let i = 0; i < scatterMock["稳定一区"].length; i++) {
          points.push(api.coord(scatterMock["稳定一区"][i]));
        }
        let color = "rgba(0,128,0,0.5)";
        return {
          type: "polygon",
          transition: ["shape"],
          shape: {
            points: points,
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color, 0.1),
          }),
        };
      },
      clip: true,
      silent: true,
      data: scatterMock["稳定一区"],
    },
    // 自定义限制区域
    {
      type: "custom",
      yAxisIndex: 1,
      xAxisIndex: 1,
      tooltip: {
        show: false,
      },
      renderItem: function (params, api) {
        if (params.context.rendered) {
          return;
        }
        params.context.rendered = true;
        let points = [];
        for (let i = 0; i < scatterMock["限制区"].length; i++) {
          points.push(api.coord(scatterMock["限制区"][i]));
        }
        let color = "rgba(255,255,0,0.5)";
        return {
          type: "polygon",
          transition: ["shape"],
          shape: {
            points: points,
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color, 0.1),
          }),
        };
      },
      clip: true,
      silent: true,
      data: scatterMock["限制区"],
    },
    // 自定义稳定二区
    {
      type: "custom",
      tooltip: {
        show: false,
      },
      yAxisIndex: 1,
      xAxisIndex: 1,
      renderItem: function (params, api) {
        if (params.context.rendered) {
          return;
        }
        params.context.rendered = true;
        let points = [];
        for (let i = 0; i < scatterMock["稳定二区"].length; i++) {
          points.push(api.coord(scatterMock["稳定二区"][i]));
        }
        let color = "rgba(0,128,0,0.5)";
        return {
          type: "polygon",
          transition: ["shape"],
          shape: {
            points: points,
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color, 0.1),
          }),
        };
      },
      clip: true,
      silent: true,
      data: scatterMock["稳定二区"],
    },
    // 禁止区域右边线
    {
      yAxisIndex: 1,
      xAxisIndex: 1,
      name: "",
      data: pointObj["禁止右侧坐标"],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 稳定区域右边线
    {
      yAxisIndex: 1,
      xAxisIndex: 1,
      name: "",
      data: pointObj["稳定一区右侧坐标"],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 限制区域右边线
    {
      yAxisIndex: 1,
      xAxisIndex: 1,
      name: "",
      data: pointObj["限制运行区域右侧坐标"],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 区域下边线
    {
      yAxisIndex: 1,
      xAxisIndex: 1,
      name: "",
      data: [
        [0, 163.05],
        [700, 163.05],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 区域上边线
    {
      yAxisIndex: 1,
      xAxisIndex: 1,
      name: "",
      data: [
        [0, 220.93],
        [700, 220.93],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 区域右边线
    {
      yAxisIndex: 1,
      xAxisIndex: 1,
      name: "",
      data: [
        [700, 220.93],
        [700, 163.05],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 区域右下出力限制线
    {
      yAxisIndex: 1,
      xAxisIndex: 1,
      name: "",
      data: [
        [700, 180.91],
        [591, 163.05],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 最大水头线
    {
      yAxisIndex: 1,
      xAxisIndex: 1,
      name: "最大水头",
      data: [
        [0, 229.4],
        [700, 229.4],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "red",
        width: 6,
      },
    },
    // 额定水头线
    {
      yAxisIndex: 1,
      xAxisIndex: 1,
      name: "额定水头",
      data: [
        [0, 186],
        [700, 186],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "yellow",
        width: 6,
      },
    },
    // 最小水头线
    {
      yAxisIndex: 1,
      xAxisIndex: 1,
      name: "最小水头",
      data: [
        [0, 154.6],
        [700, 154.6],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "green",
        width: 6,
      },
    },
  ];
  const legendData = [];
  const colorList = ["red", "green", "yellow"];
  const scatterSeries = scatterData.map((item, index) => {
    legendData.push({ icon: "circle", name: item.name });
    console.log('scatterData2',scatterData);
    return {
      symbolSize: 5,
      name: item.name,
      data: item.data,

      // color: colorList[index % colorList.length],
      color: item.color,
      type: "scatter",
      // tooltip: {
      //   show:false
      // },
    };
  });
  let series = [
    // 热力图
    // {
    //   name: "xx热力图",
    //   type: "heatmap",
    //   emphasis: {
    //     itemStyle: { borderColor: "#33333350", borderWidth: 0.5 ,color:'rgba(255,255,255,0.5)'},
    //   },
    //   tooltip: {
    //     formatter: (params) => {
    //       // console.log("params", params.value);
    //       let { value, color } = params;
    //       const x = value[0];
    //       const y = value[1];
    //       return `<span style="font-size:13px;"><b>网格详情</b><br>水头：${
    //         y * stSplit + stMin
    //       }m - ${(y + 1) * stSplit + stMin}m<br>有功：${
    //         x * ygSplit + ygMin
    //       }kW - ${
    //         (x + 1) * ygSplit + ygMin
    //       }kW<br><span ;font-size:13px;">网格占有率:</span>${value[2]}%</span>`;
    //     },
    //   },
    //   data: mapData,
    // },
    ...scatterSeries,
    ...areaSeries,
  ];

  console.log("series", series);
  const option = {
    // backgroundColor: "#cccccc20",
    // title: {
    //   text: "",
    //   subtext: "",
    //   left: "center",
    //   top: "2%",
    // },
    grid: {
      top: "2%",
      bottom: "20%",
      left: "5%",
      right: "1%",
    },
    tooltip: {
      axisPointer: { type: "cross", label: { show: false } },
    },

    legend: {
      top: "8%",
      right: "10%",
      show: false,
      textStyle: { color: "#000000", fontSize: 13, fontWeight: "bold" },
      // formatter:(data1,data2)=>{
      //   console.log('data1',data1);
      //   console.log('data2',data2);
      //   return false
      // },
      // data: [
      // { icon: "circle", name: "上导x向摆度" },
      // {icon: 'rect', name: '直接访问'},
      // {icon: 'roundRect', name: '邮件营销'},
      // {icon: 'triangle', name: '联盟广告'},
      // {icon: 'diamond', name: '视频广告'},
      // {icon: 'pin', name: 'SEO'},
      // {icon: 'arrow', name: '定点投放'}
      // ],
      data: legendData,
    },
    toolbox: {
      show: true,
      right: "3%",
      top: "4%",
      feature: {
        // 还原
        restore: {},
        // 保存为图片
        saveAsImage: {
          // 忽略工具栏、区域缩放组件
          excludeComponents: ["toolbox", "dataZoom"],
        },
      },
      // 工具栏icon颜色
      // iconStyle: { borderColor: '#666' }
    },
    xAxis: [
      {
        name: "有功(Kw)",
        nameLocation: "center",
        nameGap: 28,
        nameTextStyle: { color: "#000000", fontSize: 14 },

        type: "category",
        axisLabel: {
          textStyle: { color: "#000000", fontSize: 13, fontWeight: "bold" },
        },
        axisLine: { lineStyle: { color: "#000000", width: 2 } },
        splitLine: {
          show: true,
          lineStyle: { type: "dashed", color: "#70707030" },
        },
        z: 3,
        data: xData,
      },
      {
        type: "value",
        name: "",
        min: ygMin,
        max: ygMax,
        position: "bottom",
        interval: 30,
        nameTextStyle: {
          color: "#9cecfd",
          // color: "red",
          fontSize: 14,
        },

        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        name: "水头(m)",
        nameLocation: "center",
        nameGap: 48,
        nameTextStyle: { color: "#000000", fontSize: 14 },
        type: "category",
        axisLabel: {
          textStyle: { color: "#000000", fontSize: 13, fontWeight: "bold" },
        },
        axisLine: { lineStyle: { color: "#000000", width: 2 } },
        splitLine: {
          show: true,
          lineStyle: { type: "dashed", color: "#70707030" },
        },
        z: 3,
        data: yData,
      },
      {
        name: "",
        min: stMin,
        max: stMax,
        position: "left",
        z: 5,
        interval: 5,
        nameTextStyle: {
          color: "#9cecfd",
          fontSize: 14,
          padding: [0, 0, 10, 30],
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    // visualMap: {
    //   right: "3.4%",
    //   top: "center",
    //   min: 0,
    //   max: 1,
    //   calculable: true,
    //   realtime: false,
    //   show: false,
    //   seriesIndex: 0,
    //   itemWidth: 16,
    //   itemHeight: 240,
    //   formatter: function (value) {
    //     return value * 100 + "%"; // 范围标签显示内容。
    //   },
    //   inRange: {
    //     // color: [
    //     //   "#ffffff",
    //     //   "#d7e3ff",
    //     //   "#b5c9ff",
    //     //   "#8fb3ff",
    //     //   "#7e97ff",
    //     //   "#6270f7",
    //     //   "#0062ff",
    //     //   "#009797",
    //     //   "#00c732",
    //     //   "#62ff00",
    //     //   "#97ff00",
    //     //   "#c7ff32",
    //     //   "#ffff00",
    //     //   "#ffa100",
    //     //   "#fb7900",
    //     // ],
    //     color: [
    //       "#ffffff",
    //       "#d7e3ff",
    //       "#b5c9ff",
    //       "#8fb3ff",
    //       // "#7e97ff",
    //       // "#6270f7",
    //       // "#0062ff",
    //       // "#009797",
    //       // "#00c732",
    //       // "#62ff00",
    //       // "#97ff00",
    //       // "#c7ff32",
    //       // "#ffff00",
    //       // "#ffa100",
    //       // "#fb7900",
    //     ],
    //   },
    //   textStyle: { fontWeight: "bold" },
    // },
    dataZoom: [
      {
        type: "slider",
        xAxisIndex: [0, 1],
        filterMode: "empty",
        height: 26,
        bottom: "2.8%",
        // start: 0,
        // end: 50
      },
      // {
      //   type: "slider",
      //   yAxisIndex: [0, 1],
      //   filterMode: "empty",
      //   width: 26,
      //   right: "1.2%",
      //   // start: 0,
      //   // end: 70,
      // },
      {
        type: "inside",
        xAxisIndex: [0, 1],
        filterMode: "empty",
      },
      {
        type: "inside",
        yAxisIndex: [0, 1],
        filterMode: "empty",
      },
    ],
    series: series,
  };

  return option;
}

function getParamsData(params) {
  const stMin = 150;
  const stMax = 230;
  const ygMin = 0;
  const ygMax = 720;
  const stSplit = 1;
  const ygSplit = 5;
  // 散点图
  const scatterData = [
    {
      name: "上导X向摆渡",
      data: [
        [10.0, 6.33],
        [14.0, 8.96],
        [12.5, 6.82],
        [9.15, 7.2],
        [11.5, 7.2],
        [3.03, 4.23],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [4.05, 4.96],
        [6.03, 7.24],
        [12.0, 6.26],
        [12.0, 8.84],
        [7.08, 5.82],
        [5.02, 5.68],
      ],
    },
    {
      name: "上导Y向摆渡",
      data: [
        [101.0, 62.233],
        [124.0, 81.96],
        [132.5, 62.82],
        [94.15, 72.2],
        [151.5, 73.2],
        [36.03, 42.23],
        [162.2, 73.83],
        [27.02, 43.47],
        [177.05, 33.33],
        [488.05, 34.96],
        [69.03, 73.24],
        [172.0, 62.26],
        [182.0, 82.84],
        [78.08, 53.82],
        [59.02, 52.68],
      ],
    },
  ];

  // return {
  //   stMin,
  //   stMax,
  //   ygMin,
  //   ygMax,
  //   stSplit,
  //   ygSplit,
  //   scatterData,
  // };
  return params;
}
